

import React,{Component} from 'react';

import {Redirect} from "react-router-dom";
    
    
  
  

class Login extends Component {

    constructor (props) {
        super(props)
        this.state = {
            isLoginFlag:false // 用于判断跳转的标志
         }
    }
    loginSubmit=(e)=>{
        e.preventDefault();
        let userName = this.refs.user.value;
        let passWord = this.refs.pwd.value;
        console.log(userName,passWord)
        // 模拟登录成功跳转
        if (userName === 'admin' && passWord === '123456') {
            alert(`登录成功!!!!;用户名:${userName};密码:${passWord}`)
            this.setState({
                isLoginFlag:true
            })
        } else {
            alert('登录失败');
        }

    }
    render () {
        if (this.state.isLoginFlag) {
            return <Redirect to="/" />
        }
        return (
            <div className="login">
                <form id="login-form" onSubmit={this.loginSubmit}>
                    <div className="form-item">
                        <label htmlFor="username">用户名 <input type="text" placeholder="admin" id="username" autoComplete="off" ref="user"/></label>
                    </div>
                    <div  className="form-item"> 
                        <label htmlFor="password">密码 <input type="password" placeholder="123456" id="password" autoComplete="off" ref="pwd" /></label>
                    </div>
                    <div className="form-item">
                        <input type="submit" value="登录试试"/>
                    </div>
                    
                </form>
            </div>
        )
    }
}
export default Login;